<template>
  <div id="Login">
    <div class="Login_form">
      <a-form
        :model="formState"
        name="login"
        labelAlign="right"
        :label-col="{ span: 4 }"
        autocomplete="off"
        @finish="onFinish"
        @finishFailed="onFinishFailed"
      >
      <p class="project_name">ERP信息管理系统</p>
        <a-form-item
        label="用户名"
        name="usename"
        :rules="[{ required: true, message: '请输入用户名!' }]"
        >
        <a-input v-model:value="formState.usename" />
        </a-form-item>
        <a-form-item
        label="密码"
        name="password"
        :rules="[{ required: true, message: '请输入密码!' }]"
        >
        <a-input-password v-model:value="formState.password" />
        </a-form-item>
        <a-form-item :wrapper-col="{span: 24 }">
            <a-button type="primary" html-type="submit">登录</a-button>
            <router-link to="register" style='margin-left:5px'>注册</router-link>
        </a-form-item>
        <a-form-item name="remember" :wrapper-col="{ span: 24 }" style="text-align: right;">
            <a-checkbox v-model:checked="formState.remember">记住密码</a-checkbox>
        </a-form-item> 
      </a-form>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive } from 'vue';
import { useLogin } from "@/api/user";
import { useRouter } from 'vue-router';
import { message } from 'ant-design-vue';
import 'ant-design-vue/es/message/style/index';
interface FormState {
  usename: string;
  password: string;
  remember: boolean;
}
export default defineComponent({
  setup() {
    const router = useRouter();
    const formState = reactive<FormState>({
      usename: 'admin',
      password: '123456',
      remember: true,
    });
    message.info('111111')
    const onFinish = () => {
      // 清理可能存在的损坏数据
      try {
        const existingUserInfo = localStorage.getItem('userInfo')
        if (existingUserInfo) {
          JSON.parse(existingUserInfo)
        }
      } catch (error) {
        console.warn('清理损坏的localStorage数据:', error)
        localStorage.removeItem('userInfo')
        localStorage.removeItem('token')
      }
      
      useLogin(formState).then((res:any) => {
        console.log('登录响应:', res) // 添加调试日志
        
        if (res.code === 200) {
          // 安全地存储token和用户信息
          const token = res.data || res?.token || ''
          const userInfo = res.data?.userInfo || res.data || {}
          
          console.log('原始token:', token) // 调试：查看原始token
          console.log('token长度:', token.length) // 调试：查看token长度
          console.log('token类型:', typeof token) // 调试：查看token类型
          
          if (token) {
            // 检查token格式
            if (token.includes('.')) {
              console.log('检测到JWT格式token')
              const parts = token.split('.')
              console.log('JWT部分数量:', parts.length)
              parts.forEach((part, index) => {
                console.log(`JWT部分${index + 1}:`, part.substring(0, 20) + '...')
              })
            } else {
              console.log('非JWT格式token')
            }
            
            localStorage.setItem('token', token)
          }
          
          // 确保userInfo是有效的对象
          if (userInfo && typeof userInfo === 'object') {
            localStorage.setItem('userInfo', JSON.stringify(userInfo))
          }
          
          // 显示登录成功消息
          message.success('登录成功！')
          
          // 跳转到首页
          router.push('/home')
        } else {
          // 登录失败，显示错误信息
          message.error(res.message || '登录失败，请检查用户名和密码')
        }
       }).catch((error: any) => {
         console.error('登录请求失败:', error)
         message.error('登录请求失败，请稍后重试')
       })
    };
    const messageInfo = () => {
      message.error('登录失败')
    }
    const onFinishFailed = (errorInfo: any) => {
      console.log('Failed:', errorInfo);
    };
    const compose = ' ced jia';
    return {
      formState,
      compose,
      onFinish,
      onFinishFailed,
      messageInfo
    };
  },
  methods: {
    goRegister() {
      console.log('11121')
    },
    // // 测试ramda
    // handleAdd() {
    //   console.log(R.add(2,8))
    // },
    // handleAdjust() {
    //   console.log(R.adjust(1, R.toUpper, ['a', 'b', 'c', 'd']));
    //   console.log(R.update(2, '_', [1,2,3,4,5]))
    // },
    // handleAll() {
    //   const eques = R.equals(2);
    //   console.log(R.all(eques)([1,2,2,2,2,2]))
    //   console.log(R.all(eques)([2,2,2,2,2,2]))
    //   // lt 首个参数小于第二个参数 true
    //   console.log(R.lt(0, -1), R.lt(1,2), R.lt('a', 'z'), R.lt('2024-11', '2024-02'))
    //   // lte 小于或等于
    //   console.log(R.lte(2, 1), R.lte(2,2), R.lte('2023-04-01', '2023-04-01'))
    // },
    // handleFlip() {
    //   // flip  交换前两个参数
    //   const mergeThree = (a, b, c) => [].concat(a,b,c)
    //   console.log(R.flip(mergeThree)(2, 3, 4))
    // },
    /** compost 右->左，右侧输出作为左侧输入
     * negate  数值取反
     * nAry 将一个任意元（包括零元）的函数，封装成一个确定元数（参数个数）的函数。任何多余的参数都不会传入被封装的函数
     * multiply  乘积
     * map 接收一个函数和functor
     * add 加，数字
     * dec 减一，数字
     * decend 排序
     * asend 升序
     * prop 指定参数
     * isNil 校验null或undefined
     * isEmpty 校验是否是制定类型的空值
     * */
    // handleCompose() {
    //   const test = (v, v1) => `${v} ${v1}`;
    //   const Ctext = R.compose(R.toUpper, test);
    //   this.compose = Ctext('abc', 'def');
    //   console.log(this.compose)
    //   console.log(R.compose(Math.abs, R.add(1), R.multiply(2))(-4))
    //   console.log(R.negate(94))
    //   const taskOne = (a, b) => [a, b];
    //   taskOne(2, 3);
    //   const taskTwo = R.nAry(1, taskOne)
    //   console.log(taskTwo)
    //   console.log(R.multiply(2, 4))
    //   const redux = x => typeof(x) == 'number' ? x *2 : `${x}+1`;
    //   console.log(R.map(redux, [1,3,4]), R.map(redux,{1: 'text', 2: 'c', 3: 'cxx' }))
    //   const objs = {
    //     name: 'test',
    //     id: 1,
    //     type: 'add',
    //     // datas: {
    //     //   list: [
    //     //     {
    //     //       id: 'jid',
    //     //       num: 10,
    //     //       type: 'detail',
    //     //       gx: 'djaiof'
    //     //     },
    //     //     {
    //     //       id: 'jid1',
    //     //       num: 101,
    //     //       type: 'detai2l',
    //     //       gx: 'djaio2f'
    //     //     },
    //     //   ]
    //     // }
    //   }
    //   const getData = (v) => {
    //   return {
    //     name: v.name,
    //     id: v.id,
    //     type: v.type,
    //     // data: v.datas.list
    //   }
    // }
    //   console.log(R.map(redux, getData(objs)))
    // },
    /**
     * concat 拼接，注意类型,智能用于字符串和数组
    */
    // handleConcat() {
    //   console.log(R.concat('abc', 'xyz'), R.concat([1,2,3,4,5], [6]), R.concat([{a: 1, b: false}], [{a:2, b: true, c: 'cdk'}]))
    //   console.log(R.concat([
    //     [{x: 1, b: 'c'}], [{x: 2, b: false}]
    //   ], [
    //     [1,2,3,4], [{x: 3, b: 't', c: true}]
    //   ]));
    //   console.log(R.dec(45))
    // },
    // handlePop() {
    //   const people = [
    //     {
    //       name: 'abc',
    //       id: 10,
    //       type: 'add'
    //     }, {
    //       name: 'xyz',
    //       id: 9
    //     },
    //     {
    //       name: 'acf',
    //       id: 8
    //     }
    //   ]
    //   console.log(R.sort(R.ascend(R.prop('id')), people))

    //   const diff = (a, b) => { return a-b };
    //   const diff1 = (a, b) => { return b-a }
    //   console.log(R.sort(diff, [8, 9, 2, 5, 7, 10, 1]), R.sort(diff1, [1, 4, 0, 9, 6])) 
    //   console.log(R.keys({a: 'c', y: 1, z: '10'}))
    //   console.log(R.last(['a', 'b', 10, 'c']), R.last('this is a time cest'))
      

    //   console.log(R.isNil(null), R.isNil(undefined), R.isNil(false), R.isNil([1,2,3]), 'isNil')

    //   console.log(R.isEmpty(['a', '10', 1]), R.isEmpty({}), R.isEmpty(null), R.isEmpty(''), 'isEmpty')
    //   // const F = function () { this.x = 'x'};
    //   // F.prototype.y = 'y'
    //   // const F = new F();
    //   // console.log(R.keysIn(F))
    // }
  }
});
</script>
<style lang="scss">
#Login{
    width: 100%;
    height: 100%;
    position: absolute;
    background: #fff;
    display: -webkit-flex;
    flex-direction: row;
    justify-items: center;
    align-items: center;
    vertical-align: middle;
    background: url('../assets/bg.jpg') no-repeat left;
    background-size: 100%;
}
.Login_form {
    width: 440px;
    height: 300px;
    padding: 20px 10px;
    background: rgb(184, 218, 245);
    border: 1px solid #8d8b8b;
    position: absolute;
    right: 240px;
    top: 32%;
    line-height: 100%;
    border-radius: 10px;
}
.project_name {
  text-align: center;
  font-size: 30px;
  line-height: 34px;
  font-weight: bold;
  margin-bottom: 34px;
}
</style>